<!DOCTYPE html>
<meta charset="UTF-8">
<form id="myform"style="margin-top: 20px">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">用户名：</label>
			<div class="layui-input-inline">
				<input type="text" name="username"
					class="layui-input" id="username"placeholder="请输入用户名"/>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">姓名：</label>
			<div class="layui-input-inline">
				<input type="text" name="name"
					class="layui-input" id="name"placeholder="请输入姓名"/>
			</div>
		</div>
		<div class="layui-btn-group ">
			<div class="layui-inline">
				<button type="button" class="layui-btn  layui-icon layui-icon-search"onclick="usersearch()">查询</button>
				<button type="button" class="layui-btn  layui-icon layui-icon-circle"onclick="userempty()">清空</button>
			</div>
		</div>
	</div>
</form>
<script type="text/html" id="toolbarUser">
  	<div class="layui-btn-group ">
   		<button class="layui-btn layui-icon layui-icon-add-1" lay-event="add"> 新增</button>
  	  	<button class="layui-btn layui-icon layui-icon-edit" lay-event="update"> 修改</button>
  	  	<button class="layui-btn layui-icon layui-icon-delete" lay-event="delete"> 删除</button>
	</div>
	</script>
	<script type="text/html" id="barDemo3">
		<button class="layui-btn layui-btn-sm layui-icon layui-icon-refresh" lay-event="refresh">重置密码</button>
	</script>
<table class="layui-hide" id="user_table" lay-filter="user_table"></table>
<script type="text/javascript">
	layui.use('table', function() {
		var table = layui.table;
		table.render({
			height: 'auto',
		    elem: '#user_table',
		    url:'user/page',
		    toolbar: '#toolbarUser',
		    page: true,
		    cols: [
		    	[
		      {type:'checkbox'},
		      {field:'username', width:'18%', title: '用户名'},
		      {field:'name', width:'18%', title: '姓名'},
		      {field:'sex', width:'18%', title: '性别'},
		      {field:'age', width:'18%', title: '年龄'},
		      {field:'phone', width:'17%', title: '电话'},
		      {fixed:'right',width:'8%', title:'操作', toolbar: '#barDemo3'}
		    ]
		    	]
		})
		  table.on('toolbar',function(obj){
			  	switch(obj.event){
			      	case 'add':
			      		add();
			      		break;
			      	case 'update':
			      		update();
			      		break;
			      	case 'delete':
			      		del();
			      		break;
			  }
		});
		
	table.on('tool(user_table)', function(obj) {
			var data = obj.data;
			var id = data.id;
			if (obj.event === "refresh") {
				layer.confirm('确定重置密码吗？', function() {
					$.post('user/refresh', {id : id}, function(result) {
						layer.alert(result);
						red();
					})
				});
			}

		});

		function add() {
			layer.open({
				type : 2,
				title : '新增',
				/* anim: 1, */
				/* shade: 0.6, */
				area : [ '500px', '500px' ],
				content : [ 'user/edit' ],
				btn : [ '提交', '退出' ],
				yes : function(index, layero) {
					var obj = layero.find("iframe")[0].contentWindow;
					var win = top.window['layui-layer-iframe' + index];
					var role = win.$("#role").val();
					var username = win.$("#username").val();
					var name = win.$("#name").val();
					var sex = win.$("#sex").val();
					var age = win.$("#age").val();
					var phone = win.$("#phone").val();
					$.post('user/save', {
						role : role,
						username : username,
						name : name,
						sex : sex,
						age : age,
						phone : phone
					}, function(msg) {
						layer.msg(msg);
						red();
					});
					layer.closeAll('iframe');
				}
			})
		}
		function update() {
			var checkStatus = table.checkStatus('user_table');
			var data = checkStatus.data;
			var zid = data.length == 1 ? data[0].id : '';
			if (data.length != 1) {
				layer.msg("请选择一行进行修改！");
				return;
			}
			layer.open({
				type : 2,
				title : '<i class="layui-icon">修改</i>',
				area : [ '500px', '500px' ],
				content : [ 'user/edit?id=' + zid ],
				btn : [ '提交', '退出' ],
				yes : function(index, layero) {
					var obj = layero.find("iframe")[0].contentWindow;
					var win = top.window['layui-layer-iframe' + index];

					var id = win.$("#id").val();
					var role = win.$("#role").val();
					var username = win.$("#username").val();
					var name = win.$("#name").val();
					var sex = win.$("#sex").val();
					var age = win.$("#age").val();
					var phone = win.$("#phone").val();
					$.post('user/save', {
						id : id,
						role : role,
						username : username,
						name : name,
						sex : sex,
						age : age,
						phone : phone
					}, function(msg) {
						layer.msg(msg);
						red();
					});
					layer.closeAll('iframe');
				}
			})
		}

		function del() {
			var checkStatus = table.checkStatus('user_table');
			var data = checkStatus.data;
			var zid = data.length == 1 ? data[0].id : '';
			if (data.length != 1) {
				layer.msg("请选择一行进行删除！");
				return;
			}
			layer.confirm('确定删除此行数据吗？', function() {
				$.post('user/delete', {
					id : zid
				}, function(result) {
					layer.msg(result);
					red();
				})
			});
		}
	});
	//刷新表格
	function red() {
		var table = layui.table;
		table.reload('user_table', {
			url : 'user/page'
		});
	}
	//查询
	function usersearch() {
		var name = $('#name').val();
		var username = $('#username').val();
		layui.use('table', function() {
			var table = layui.table;
			table.reload('user_table', {
				url : 'user/page',
				where : {
					name : name,
					username : username
				}
			});
		});
	}
	//清空表格
	function userempty() {
		$("#myform")[0].reset();
		var name = $('#name').val();
		var username = $('#username').val();
		layui.use('table', function() {
			var table = layui.table;
			table.reload('user_table', {
				url : 'user/page',
				where : {
					name : name,
					username : username
				}
			});
		});
	}
</script>